<template>
  <div>
    <div class="ad">
      <div class="ad-left">
        <el-button class="ad-btn" type="success" size="mini">Ad</el-button>
        <strong>Web Storm</strong>
        <span>Smart IDE for JavaScript. Out-of-the-box Experience.</span>
        <a href="http://www.baidu.com" class="ad-a"> Learn more</a>
      </div>
      <div class="ad-right">
        <a href="https://panjiachen.github.io" title="这才是大佬">原作者项目github</a>
      </div>
    </div>
    <el-card>
      <div class="card-panel-box">
        <div class="card" v-for="item in indexData.cardData" :key="item.id">
          <div class="card-icon">
            <i :class="item.icon"></i>
          </div>
          <div class="card-content">
            <p class="card-title">{{item.title}}</p>
            <p class="card-data">{{item.count | numberFormat}}</p>
          </div>
        </div>
      </div>
    </el-card>
    <el-card>
      <div class="echarts-content one"></div>
    </el-card>
    <el-card>
      <div class="echarts-item">
        <el-card>
          <div class="ecsItem two"></div>
        </el-card>
        <el-card>
          <div class="ecsItem three"></div>
        </el-card>
        <el-card>
          <div class="ecsItem four"></div>
        </el-card>
      </div>
    </el-card>
    <div class="index-footer">
      <el-card class="card-order">
        <el-table :data="orderTableData">
          <el-table-column label="Order-No" prop="orderNo"  class="index-footer-text"></el-table-column>
          <el-table-column label="Prices" width="150px">
            <template slot-scope="scope">
              {{scope.row.prices | numberFormat('￥')}}
            </template>
          </el-table-column>
          <el-table-column label="Status" width="150px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status" type="success" size="small">success</el-tag>
              <el-tag v-else type="warning" size="small">pending</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card class="card-todo">
        <div class="todo">
          <div class="todoHeader">
            <input class="todoInput" v-model="todoValue" @keyup.enter="addTodoList" placeholder="To Do" />
            <i class="el-icon-document-add todoAddIcon" @click="addTodoList"></i>
          </div>
          <div class="todoMain">
            <ul class="todoul">
              <li class="todoli" v-for="item in todoList" :key="item.id">
                <i :class="[item.done ? 'done' : 'undone', 'el-icon-circle-check', 'c-done']" @click="changeState(item.id)"></i>
                <span :class="item.done ? 'isdone' : 'nodone'">{{item.todoValue}}</span>
                <i class="el-icon-close removetodo" @click="removeTodo(item.id)"></i>
              </li>
            </ul>
            <p class="todotitle">fighting今天也是元气满满的一天<br />
              <svg t="1592477035817" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2215" width="50" height="50"><path d="M511.3 95.1c230.3 0 417 186.7 417 417s-186.7 417-417 417-417-186.7-417-417c0-230.4 186.7-417 417-417z" fill="#37AFFA" p-id="2216"></path><path d="M928.3 512c0-230.3-186.7-417-417-417s-417 186.7-417 417 186.7 417 417 417 417-186.7 417-417zM498.7 881.9C287.3 881.9 116 710.5 116 499.1s171.4-382.8 382.8-382.8 382.8 171.4 382.8 382.8-171.5 382.8-382.9 382.8z" fill="#37AFFA" p-id="2217"></path><path d="M498.7 116.4C287.3 116.4 116 287.7 116 499.1s171.4 382.8 382.8 382.8 382.8-171.4 382.8-382.8-171.5-382.7-382.9-382.7z m-16.3 695.1c-182.4 0-330.3-147.9-330.3-330.3S300 150.8 482.4 150.8s330.3 147.9 330.3 330.3-147.8 330.4-330.3 330.4z" fill="#41B6FB" p-id="2218"></path><path d="M482.4 150.8c-182.4 0-330.3 147.9-330.3 330.3S300 811.5 482.4 811.5s330.3-147.9 330.3-330.3-147.8-330.4-330.3-330.4zM466.1 741c-153.5 0-277.9-124.4-277.9-277.9s124.4-277.9 277.9-277.9S744 309.7 744 463.1 619.6 741 466.1 741z" fill="#4CBCFC" p-id="2219"></path><path d="M466.1 185.3c-153.5 0-277.9 124.4-277.9 277.9S312.7 741 466.1 741 744 616.6 744 463.1 619.6 185.3 466.1 185.3z m-16.3 485.3c-124.5 0-225.4-100.9-225.4-225.4s100.9-225.4 225.4-225.4 225.4 100.9 225.4 225.4-100.9 225.4-225.4 225.4z" fill="#56C3FD" p-id="2220"></path><path d="M449.8 219.7c-124.5 0-225.4 100.9-225.4 225.4s100.9 225.4 225.4 225.4 225.4-100.9 225.4-225.4-100.9-225.4-225.4-225.4z m-16.2 380.4c-95.5 0-173-77.4-173-173s77.4-173 173-173 173 77.4 173 173-77.5 173-173 173z" fill="#60C9FD" p-id="2221"></path><path d="M433.6 254.2c-95.5 0-173 77.4-173 173s77.4 173 173 173 173-77.4 173-173-77.5-173-173-173z m-16.3 275.5c-66.6 0-120.5-54-120.5-120.5s54-120.5 120.5-120.5 120.5 54 120.5 120.5-54 120.5-120.5 120.5z" fill="#6BCFFE" p-id="2222"></path><path d="M417.3 409.2m-120.5 0a120.5 120.5 0 1 0 241 0 120.5 120.5 0 1 0-241 0Z" fill="#75D6FF" p-id="2223"></path><path d="M511.3 113.1c53.9 0 106.1 10.5 155.3 31.3 47.5 20.1 90.2 48.9 126.8 85.5 36.7 36.6 65.4 79.3 85.5 126.8 20.8 49.2 31.3 101.4 31.3 155.3S899.8 618.2 879 667.4c-20.1 47.5-48.9 90.2-85.5 126.8s-79.3 65.4-126.8 85.5C617.5 900.5 565.2 911 511.3 911S405.2 900.5 356 879.7c-47.5-20.1-90.2-48.9-126.8-85.5-36.6-36.6-65.4-79.3-85.5-126.8-20.8-49.2-31.3-101.4-31.3-155.3 0-53.9 10.5-106.1 31.3-155.3 20.1-47.5 48.9-90.2 85.5-126.8s79.3-65.4 126.8-85.5c49.2-20.9 101.5-31.4 155.3-31.4m0-18c-230.3 0-417 186.7-417 417s186.7 417 417 417 417-186.7 417-417c0-230.4-186.7-417-417-417z" fill="#37AFFA" p-id="2224"></path><path d="M363.6 444.7c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5c-33.6 0-60.8 31.1-60.8 69.5s27.3 69.5 60.8 69.5z m295.4 0c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5c-33.6 0-60.8 31.1-60.8 69.5s27.2 69.5 60.8 69.5z m26.4 86.9H337.3c-21.7 0-37.9 19.5-33.8 40.4 19.1 95.8 104.9 168.1 207.8 168.1S700 667.8 719.1 572c4.3-20.9-12-40.4-33.7-40.4z" fill="#B9E8FF" p-id="2225"></path><path d="M219.4 321.1c-3.6 0-7.2-1.1-10.3-3.3-8.1-5.7-10.1-16.9-4.4-25.1 42.7-61 94.3-94 96.5-95.4 8.4-5.3 19.5-2.8 24.8 5.6 5.3 8.4 2.8 19.5-5.6 24.8-0.7 0.4-47.9 30.9-86.2 85.6-3.5 5.1-9.1 7.8-14.8 7.8zM181.6 381.5c-3 0-6-0.7-8.8-2.3-8.7-4.8-11.8-15.8-6.9-24.5l5.5-9.8c4.8-8.7 15.8-11.8 24.5-6.9s11.8 15.8 6.9 24.5l-5.5 9.8c-3.3 5.9-9.4 9.2-15.7 9.2z" fill="#FFFFFF" p-id="2226"></path></svg>
              <svg t="1592477167026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2354" width="50" height="50"><path d="M511.3 95.1c230.3 0 417 186.7 417 417s-186.7 417-417 417-417-186.7-417-417c0-230.4 186.7-417 417-417z" fill="#0DCEA7" p-id="2355"></path><path d="M928.3 512c0-230.3-186.7-417-417-417s-417 186.7-417 417 186.7 417 417 417 417-186.7 417-417zM498.7 881.9C287.3 881.9 116 710.5 116 499.1s171.4-382.8 382.8-382.8 382.8 171.4 382.8 382.8-171.5 382.8-382.9 382.8z" fill="#0DCEA7" p-id="2356"></path><path d="M498.7 116.4C287.3 116.4 116 287.7 116 499.1s171.4 382.8 382.8 382.8 382.8-171.4 382.8-382.8-171.5-382.7-382.9-382.7z m-16.3 695.1c-182.4 0-330.3-147.9-330.3-330.3S300 150.8 482.4 150.8s330.3 147.9 330.3 330.3-147.8 330.4-330.3 330.4z" fill="#1DD49C" p-id="2357"></path><path d="M482.4 150.8c-182.4 0-330.3 147.9-330.3 330.3S300 811.5 482.4 811.5s330.3-147.9 330.3-330.3-147.8-330.4-330.3-330.4zM466.1 741c-153.5 0-277.9-124.4-277.9-277.9s124.4-277.9 277.9-277.9S744 309.7 744 463.1 619.6 741 466.1 741z" fill="#2DDB92" p-id="2358"></path><path d="M466.1 185.3c-153.5 0-277.9 124.4-277.9 277.9S312.7 741 466.1 741 744 616.6 744 463.1 619.6 185.3 466.1 185.3z m-16.3 485.3c-124.5 0-225.4-100.9-225.4-225.4s100.9-225.4 225.4-225.4 225.4 100.9 225.4 225.4-100.9 225.4-225.4 225.4z" fill="#3DE188" p-id="2359"></path><path d="M449.8 219.7c-124.5 0-225.4 100.9-225.4 225.4s100.9 225.4 225.4 225.4 225.4-100.9 225.4-225.4-100.9-225.4-225.4-225.4z m-16.2 380.4c-95.5 0-173-77.4-173-173s77.4-173 173-173 173 77.4 173 173-77.5 173-173 173z" fill="#4CE77D" p-id="2360"></path><path d="M433.6 254.2c-95.5 0-173 77.4-173 173s77.4 173 173 173 173-77.4 173-173-77.5-173-173-173z m-16.3 275.5c-66.6 0-120.5-54-120.5-120.5s54-120.5 120.5-120.5 120.5 54 120.5 120.5-54 120.5-120.5 120.5z" fill="#5CEE73" p-id="2361"></path><path d="M417.3 409.2m-120.5 0a120.5 120.5 0 1 0 241 0 120.5 120.5 0 1 0-241 0Z" fill="#6CF468" p-id="2362"></path><path d="M511.3 113.1c53.9 0 106.1 10.5 155.3 31.3 47.5 20.1 90.2 48.9 126.8 85.5 36.7 36.6 65.4 79.3 85.5 126.8 20.8 49.2 31.3 101.4 31.3 155.3S899.8 618.2 879 667.4c-20.1 47.5-48.9 90.2-85.5 126.8s-79.3 65.4-126.8 85.5C617.5 900.5 565.2 911 511.3 911S405.2 900.5 356 879.7c-47.5-20.1-90.2-48.9-126.8-85.5-36.6-36.6-65.4-79.3-85.5-126.8-20.8-49.2-31.3-101.4-31.3-155.3 0-53.9 10.5-106.1 31.3-155.3 20.1-47.5 48.9-90.2 85.5-126.8s79.3-65.4 126.8-85.5c49.2-20.9 101.5-31.4 155.3-31.4m0-18c-230.3 0-417 186.7-417 417s186.7 417 417 417 417-186.7 417-417c0-230.4-186.7-417-417-417z" fill="#0EC69A" p-id="2363"></path><path d="M363.6 444.7c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5c-33.6 0-60.8 31.1-60.8 69.5s27.3 69.5 60.8 69.5z m295.4 0c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5c-33.6 0-60.8 31.1-60.8 69.5s27.2 69.5 60.8 69.5z m26.4 86.9H337.3c-21.7 0-37.9 19.5-33.8 40.4 19.1 95.8 104.9 168.1 207.8 168.1S700 667.8 719.1 572c4.3-20.9-12-40.4-33.7-40.4z" fill="#9CFFBD" p-id="2364"></path><path d="M219.4 321.1c-3.6 0-7.2-1.1-10.3-3.3-8.1-5.7-10.1-16.9-4.4-25.1 42.7-61 94.3-94 96.5-95.4 8.4-5.3 19.5-2.8 24.8 5.6 5.3 8.4 2.8 19.5-5.6 24.8-0.7 0.4-47.9 30.9-86.2 85.6-3.5 5.1-9.1 7.8-14.8 7.8zM181.6 381.5c-3 0-6-0.7-8.8-2.3-8.7-4.8-11.8-15.8-6.9-24.5l5.5-9.8c4.8-8.7 15.8-11.8 24.5-6.9s11.8 15.8 6.9 24.5l-5.5 9.8c-3.3 5.9-9.4 9.2-15.7 9.2z" fill="#FFFFFF" p-id="2365"></path></svg>
              <svg t="1592477191813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2493" width="50" height="50">
                <path d="M511.3 95.1c230.3 0 417 186.7 417 417s-186.7 417-417 417-417-186.7-417-417c0-230.4 186.7-417 417-417z" fill="#FF556E" p-id="2494"></path>
                <path d="M928.3 512c0-230.3-186.7-417-417-417s-417 186.7-417 417 186.7 417 417 417 417-186.7 417-417zM498.7 881.9C287.3 881.9 116 710.5 116 499.1s171.4-382.8 382.8-382.8 382.8 171.4 382.8 382.8-171.5 382.8-382.9 382.8z" fill="#FF556E" p-id="2495"></path>
                <path d="M498.7 116.4C287.3 116.4 116 287.7 116 499.1s171.4 382.8 382.8 382.8 382.8-171.4 382.8-382.8-171.5-382.7-382.9-382.7z m-16.3 695.1c-182.4 0-330.3-147.9-330.3-330.3S300 150.8 482.4 150.8s330.3 147.9 330.3 330.3-147.8 330.4-330.3 330.4z" fill="#FF5F71" p-id="2496"></path>
                <path d="M482.4 150.8c-182.4 0-330.3 147.9-330.3 330.3S300 811.5 482.4 811.5s330.3-147.9 330.3-330.3-147.8-330.4-330.3-330.4zM466.1 741c-153.5 0-277.9-124.4-277.9-277.9s124.4-277.9 277.9-277.9S744 309.7 744 463.1 619.6 741 466.1 741z" fill="#FF6974" p-id="2497"></path>
                <path d="M466.1 185.3c-153.5 0-277.9 124.4-277.9 277.9S312.7 741 466.1 741 744 616.6 744 463.1 619.6 185.3 466.1 185.3z m-16.3 485.3c-124.5 0-225.4-100.9-225.4-225.4s100.9-225.4 225.4-225.4 225.4 100.9 225.4 225.4-100.9 225.4-225.4 225.4z" fill="#FF7377" p-id="2498"></path>
                <path d="M449.8 219.7c-124.5 0-225.4 100.9-225.4 225.4s100.9 225.4 225.4 225.4 225.4-100.9 225.4-225.4-100.9-225.4-225.4-225.4z m-16.2 380.4c-95.5 0-173-77.4-173-173s77.4-173 173-173 173 77.4 173 173-77.5 173-173 173z" fill="#FF7E7A" p-id="2499"></path>
                <path d="M433.6 254.2c-95.5 0-173 77.4-173 173s77.4 173 173 173 173-77.4 173-173-77.5-173-173-173z m-16.3 275.5c-66.6 0-120.5-54-120.5-120.5s54-120.5 120.5-120.5 120.5 54 120.5 120.5-54 120.5-120.5 120.5z" fill="#FF887D" p-id="2500"></path>
                <path d="M417.3 409.2m-120.5 0a120.5 120.5 0 1 0 241 0 120.5 120.5 0 1 0-241 0Z" fill="#FF9280" p-id="2501"></path>
                <path d="M511.3 113.1c53.9 0 106.1 10.5 155.3 31.3 47.5 20.1 90.2 48.9 126.8 85.5 36.7 36.6 65.4 79.3 85.5 126.8 20.8 49.2 31.3 101.4 31.3 155.3S899.8 618.2 879 667.4c-20.1 47.5-48.9 90.2-85.5 126.8s-79.3 65.4-126.8 85.5C617.5 900.5 565.2 911 511.3 911S405.2 900.5 356 879.7c-47.5-20.1-90.2-48.9-126.8-85.5s-65.4-79.3-85.5-126.8c-20.8-49.2-31.3-101.4-31.3-155.3s10.5-106.1 31.3-155.3c20.1-47.5 48.9-90.2 85.5-126.8s79.3-65.4 126.8-85.5c49.2-20.9 101.5-31.4 155.3-31.4m0-18c-230.3 0-417 186.7-417 417s186.7 417 417 417 417-186.7 417-417c0-230.4-186.7-417-417-417z" fill="#EF4868" p-id="2502"></path>
                <path d="M363.6 444.7c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5-60.8 31.1-60.8 69.5 27.3 69.5 60.8 69.5z m295.4 0c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5-60.8 31.1-60.8 69.5 27.2 69.5 60.8 69.5z m26.4 86.9H337.3c-21.7 0-37.9 19.5-33.8 40.4 19.1 95.8 104.9 168.1 207.8 168.1S700 667.8 719.1 572c4.3-20.9-12-40.4-33.7-40.4z" fill="#FFC7C7" p-id="2503"></path>
                <path d="M219.4 321.1c-3.6 0-7.2-1.1-10.3-3.3-8.1-5.7-10.1-16.9-4.4-25.1 42.7-61 94.3-94 96.5-95.4 8.4-5.3 19.5-2.8 24.8 5.6 5.3 8.4 2.8 19.5-5.6 24.8-0.7 0.4-47.9 30.9-86.2 85.6-3.5 5.1-9.1 7.8-14.8 7.8zM181.6 381.5c-3 0-6-0.7-8.8-2.3-8.7-4.8-11.8-15.8-6.9-24.5l5.5-9.8c4.8-8.7 15.8-11.8 24.5-6.9s11.8 15.8 6.9 24.5l-5.5 9.8c-3.3 5.9-9.4 9.2-15.7 9.2z" fill="#FFFFFF" p-id="2504"></path>
                </svg>
              <svg t="1592477199543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2632" width="50" height="50">
                <path d="M511.3 95.1c230.3 0 417 186.7 417 417s-186.7 417-417 417-417-186.7-417-417c0-230.4 186.7-417 417-417z" fill="#817EF8" p-id="2633">
                </path>
                <path d="M928.3 512c0-230.3-186.7-417-417-417s-417 186.7-417 417 186.7 417 417 417 417-186.7 417-417zM498.7 881.9C287.3 881.9 116 710.5 116 499.1s171.4-382.8 382.8-382.8 382.8 171.4 382.8 382.8-171.5 382.8-382.9 382.8z" fill="#787AF6" p-id="2634"></path>
                <path d="M498.7 116.4C287.3 116.4 116 287.7 116 499.1s171.4 382.8 382.8 382.8 382.8-171.4 382.8-382.8-171.5-382.7-382.9-382.7z m-16.3 695.1c-182.4 0-330.3-147.9-330.3-330.3S300 150.8 482.4 150.8s330.3 147.9 330.3 330.3-147.8 330.4-330.3 330.4z" fill="#817EF8" p-id="2635"></path>
                <path d="M482.4 150.8c-182.4 0-330.3 147.9-330.3 330.3S300 811.5 482.4 811.5s330.3-147.9 330.3-330.3-147.8-330.4-330.3-330.4zM466.1 741c-153.5 0-277.9-124.4-277.9-277.9s124.4-277.9 277.9-277.9S744 309.7 744 463.1 619.6 741 466.1 741z" fill="#8A81F9" p-id="2636"></path>
                <path d="M466.1 185.3c-153.5 0-277.9 124.4-277.9 277.9S312.7 741 466.1 741 744 616.6 744 463.1 619.6 185.3 466.1 185.3z m-16.3 485.3c-124.5 0-225.4-100.9-225.4-225.4s100.9-225.4 225.4-225.4 225.4 100.9 225.4 225.4-100.9 225.4-225.4 225.4z" fill="#9385FB" p-id="2637"></path>
                <path d="M449.8 219.7c-124.5 0-225.4 100.9-225.4 225.4s100.9 225.4 225.4 225.4 225.4-100.9 225.4-225.4-100.9-225.4-225.4-225.4z m-16.2 380.4c-95.5 0-173-77.4-173-173s77.4-173 173-173 173 77.4 173 173-77.5 173-173 173z" fill="#9D89FC" p-id="2638"></path>
                <path d="M433.6 254.2c-95.5 0-173 77.4-173 173s77.4 173 173 173 173-77.4 173-173-77.5-173-173-173z m-16.3 275.5c-66.6 0-120.5-54-120.5-120.5s54-120.5 120.5-120.5 120.5 54 120.5 120.5-54 120.5-120.5 120.5z" fill="#A68CFD" p-id="2639"></path>
                <path d="M417.3 409.2m-120.5 0a120.5 120.5 0 1 0 241 0 120.5 120.5 0 1 0-241 0Z" fill="#AF90FF" p-id="2640"></path>
                <path d="M511.3 113.1c53.9 0 106.1 10.5 155.3 31.3 47.5 20.1 90.2 48.9 126.8 85.5 36.7 36.6 65.4 79.3 85.5 126.8 20.8 49.2 31.3 101.4 31.3 155.3S899.8 618.2 879 667.4c-20.1 47.5-48.9 90.2-85.5 126.8s-79.3 65.4-126.8 85.5C617.5 900.5 565.2 911 511.3 911S405.2 900.5 356 879.7c-47.5-20.1-90.2-48.9-126.8-85.5-36.6-36.6-65.4-79.3-85.5-126.8-20.8-49.2-31.3-101.4-31.3-155.3 0-53.9 10.5-106.1 31.3-155.3 20.1-47.5 48.9-90.2 85.5-126.8s79.3-65.4 126.8-85.5c49.2-20.9 101.5-31.4 155.3-31.4m0-18c-230.3 0-417 186.7-417 417s186.7 417 417 417 417-186.7 417-417c0-230.4-186.7-417-417-417z" fill="#676EE5" p-id="2641"></path>
                <path d="M363.6 444.7c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5c-33.6 0-60.8 31.1-60.8 69.5s27.3 69.5 60.8 69.5z m295.4 0c33.6 0 60.8-31.1 60.8-69.5s-27.2-69.5-60.8-69.5c-33.6 0-60.8 31.1-60.8 69.5s27.2 69.5 60.8 69.5z m26.4 86.9H337.3c-21.7 0-37.9 19.5-33.8 40.4 19.1 95.8 104.9 168.1 207.8 168.1S700 667.8 719.1 572c4.3-20.9-12-40.4-33.7-40.4z" fill="#CDC5FF" p-id="2642"></path>
                <path d="M219.4 321.1c-3.6 0-7.2-1.1-10.3-3.3-8.1-5.7-10.1-16.9-4.4-25.1 42.7-61 94.3-94 96.5-95.4 8.4-5.3 19.5-2.8 24.8 5.6 5.3 8.4 2.8 19.5-5.6 24.8-0.7 0.4-47.9 30.9-86.2 85.6-3.5 5.1-9.1 7.8-14.8 7.8zM181.6 381.5c-3 0-6-0.7-8.8-2.3-8.7-4.8-11.8-15.8-6.9-24.5l5.5-9.8c4.8-8.7 15.8-11.8 24.5-6.9s11.8 15.8 6.9 24.5l-5.5 9.8c-3.3 5.9-9.4 9.2-15.7 9.2z" fill="#FFFFFF" p-id="2643">
                </path>
              </svg>
            </p>
          </div>
        </div>
      </el-card>
      <el-card class="card-hot">
        <div class="hot hot-bg"></div>
        <div class="hot hot-footer">
          <div class="hot-dog">
            <div class="dog"></div>
          </div>
          <div class="hot-item"></div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      indexData: [],
      orderTableData: [
        {
          orderNo: 'dFB62925-Bd76-2A9e-CedE-e4f8bF',
          prices: 1273,
          status: true
        },
        {
          orderNo: '62c11cC6-8eE7-A1fd-99F3-e93b8B',
          prices: 3553,
          status: false
        },
        {
          orderNo: 'dFB62925-Bd76-2A9e-CedE-e4f8bF',
          prices: 1273,
          status: true
        },
        {
          orderNo: '62c11cC6-8eE7-A1fd-99F3-e93b8B',
          prices: 3553,
          status: false
        },
        {
          orderNo: 'dFB62925-Bd76-2A9e-CedE-e4f8bF',
          prices: 1273,
          status: false
        },
        {
          orderNo: '62c11cC6-8eE7-A1fd-99F3-e93b8B',
          prices: 3553,
          status: true
        },
        {
          orderNo: 'dFB62925-Bd76-2A9e-CedE-e4f8bF',
          prices: 1273,
          status: true
        },
        {
          orderNo: '62c11cC6-8eE7-A1fd-99F3-e93b8B',
          prices: 3553,
          status: true
        }
      ],
      todoValue: '',
      todoList: [
        {
          id: 0,
          todoValue: 'vuex',
          done: false
        },
        {
          id: 1,
          todoValue: 'vue',
          done: false
        },
        {
          id: 2,
          todoValue: 'css',
          done: true
        },
        {
          id: 3,
          todoValue: 'html',
          done: true
        },
        {
          id: 4,
          todoValue: 'javascript',
          done: true
        }
      ],
      todovalueStyle: {
        todovalue: true,
        isdone: false
      }
    }
  },
  created() {
    this.getIndexData()
  },
  async mounted() {
    const echarSet = []
    const res = await this.$http.get('indexPage')
    this.indexData = res
    const myChartOne = this.$ecs.init(document.querySelector('.one'))
    let optionOne = {
      color: ['#1089E7', '#00d887'],
      legend: {
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        top: '10%',
        left: '3%',
        right: '3%',
        containLabel: false
      },
      xAxis: {
        show: true,
        boundaryGap: false,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'lightgreen'
          }
        },
        axisLabel: {
          color: 'green'
        },
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          show: false
        }
      },
      yAxis: {
        show: true,
        boundaryGap: false,
        splitLine: {
          show: false
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(205, 205, 205, .1)', 'transparent', 'rgba(205, 205, 205, .1)', 'transparent', 'rgba(205, 205, 205, .1)']
          }
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'skyblue'
          }
        },
        axisLabel: {
          color: '#1089E7'
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          smooth: true,
          areaStyle: {
            color: new this.$ecs.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(7, 146, 159, 0.4)' }, { offset: 0.8, color: 'rgba(216, 216, 216, 0.1)' }], false)
          },
          label: {
            show: true
          }
        },
        {
          smooth: true,
          areaStyle: {
            color: new this.$ecs.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(0, 216, 135, 0.4)' }, { offset: 0.8, color: 'rgba(0, 216, 135, 0.1)' }], false)
          },
          label: {
            show: true,
            position: 'bottom'
          }
        }
      ]
    }
    optionOne = this._.merge(res.echartsData.one, optionOne)
    myChartOne.setOption(optionOne)
    echarSet.push(myChartOne)
    const myChartTwo = this.$ecs.init(document.querySelector('.two'))
    const optionTwo = {
      color: ['#11aa35', '#ffaa00', '#55aaff'],
      tooltip: {
        trigger: 'item'
      },
      legend: {
        left: 'center',
        bottom: 'bottom'
      },
      radar: {
        indicator: [
          { text: 'Salex', max: 100 },
          { text: 'Marketing', max: 100 },
          { text: 'Development', max: 100 },
          { text: 'Customer Suport', max: 100 },
          { text: 'tion Technology', max: 100 },
          { text: 'Administration', max: 100 }
        ],
        radius: 80,
        center: ['50%', '40%']
      },
      series: [
        {
          type: 'radar',
          areaStyle: {
            normal: ''
          },
          data: [
            {
              value: [65, 70, 80, 95, 75, 60],
              name: 'Allocated Budget'
            },
            {
              value: [95, 80, 75, 60, 73, 80],
              name: 'Expected Spending'
            },
            {
              value: [75, 80, 75, 80, 53, 80],
              name: 'Actual Spending'
            }
          ]
        }
      ]
    }
    myChartTwo.setOption(optionTwo)
    echarSet.push(myChartTwo)
    const myChartThree = this.$ecs.init(document.querySelector('.three'))
    const optionThree = {
      color: ['#b6a2de', '#32dadd', '#5ab1ef', '#ffb980', '#d87a80'],
      legend: {
        bottom: 'bottom',
        textStyle: {
          fontSize: 10
        },
        itemWidth: 10,
        itemHeight: 10
      },
      tooltip: {
        trigger: 'item'
      },
      grid: {
        left: '3%',
        right: '5%',
        containLabel: true
      },
      series: [
        {
          name: 'rose',
          type: 'pie',
          roseType: 'radius',
          center: ['50%', '40%'],
          radius: ['10%', '70%'],
          data: [
            { name: 'Industries', value: 12 },
            { name: 'Technology', value: 8 },
            { name: 'Forex', value: 4 },
            { name: 'Gold', value: 6 },
            { name: 'Forecasts', value: 9 }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, .5)'
            }
          },
          labelLine: {
            show: true,
            length: 7,
            length2: 7
          }
        }
      ]
    }
    myChartThree.setOption(optionThree)
    echarSet.push(myChartThree)
    const myChartFour = this.$ecs.init(document.querySelector('.four'))
    const myColor = ['#1089E7', '#F57474', '#56D0E3', '#F8B448', '#8B78F6']
    const optionFour = {
      color: ['#2ec7c9', '#b6a2de', '#5ab1ef'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '1%',
        left: '3%',
        right: '3%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: {
        show: true,
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLine: {
          lineStyle: {
            color: '#5ab1ef'
          }
        },
        boundaryGap: true,
        axisTick: {
          alignWithLabel: true
        }
      },
      yAxis: {
        show: true,
        type: 'value',
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#5ab1ef'
          }
        }
      },
      series: [
        {
          name: 'PageA',
          type: 'bar',
          stack: 'a',
          barWidth: '50%',
          data: [3, 1, 2, 3, 4, 5, 3]
        },
        {
          name: 'PageB',
          type: 'bar',
          stack: 'a',
          barWidth: '50%',
          data: [5, 1, 5, 1, 2, 5, 4]
        },
        {
          name: 'PageC',
          type: 'bar',
          stack: 'a',
          barWidth: '50%',
          data: [1, 3, 2, 2, 4, 1, 1]
        }
      ]
    }
    myChartFour.setOption(optionFour)
    echarSet.push(myChartFour)
    const myChartHot = this.$ecs.init(document.querySelector('.hot-item'))
    const optionHot = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        },
        formatter: '{a}<br /> {b}:{c}'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        show: false
      },
      yAxis: [
        {
          type: 'category',
          data: ['HTML5', 'CSS3', 'javascript', 'VUE', 'NODE'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: ['#ff5500'],
            fontSize: 10
          },
          inverse: true
        },
        {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: ['#55ff00'],
            fontSize: 10
          },
          data: [664, 793, 610, 350, 702]
        }
      ],
      series: [
        {
          name: '热门应用',
          type: 'bar',
          barWidth: '35%',
          itemStyle: {
            barBorderRadius: 5,
            color: function(params) {
              return myColor[params.dataIndex]
            }
          },
          backgroundStyle: {
            color: 'blue'
          },
          label: {
            show: true,
            formatter: '{c}%',
            position: 'inside',
            align: 'center',
            fontSize: 8
          },
          data: [50, 79, 61, 35, 70]
        },
        {
          name: '热门应用',
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            barBorderRadius: 5,
            borderWidth: 2,
            borderColor: 'skyblue',
            color: 'transparent'
          },
          barGap: '-105%',
          data: [100, 100, 100, 100, 100]
        }
      ]
    }
    myChartHot.setOption(optionHot)
    echarSet.push(myChartHot)
    this.$resize(echarSet)
    this.todoAddListen()
    this.animate()
  },
  updated() {
    this.todoAddListen()
  },
  methods: {
    async getIndexData() {
      const res = await this.$http.get('indexPage')
      this.indexData = res
    },
    addTodoList() {
      if(this.todoValue.trim().length === 0) return null
      const data = {
        id: this.todoList.length,
        todoValue: this.todoValue,
        done: false
      }
      this.todoList.push(data)
      this.todoValue = ''
    },
    changeState(id) {
      const index = this.todoList.findIndex(i => {
        return i.id === id
      })
      this.todoList[index].done = !this.todoList[index].done
    },
    removeTodo(id) {
      const index = this.todoList.findIndex(i => {
        return i.id === id
      })
      this.todoList.splice(index, 1)
    },
    todoAddListen() {
      const liList = document.querySelectorAll('.todoli')
      for(let i = 0; i < liList.length; i++) {
        liList[i].addEventListener('mousemove', function() {
          this.style.backgroundColor = '#eee'
          this.lastChild.style.color = '#aa0000'
        })
        liList[i].addEventListener('mouseout', function() {
          this.style.backgroundColor = 'transparent'
          this.lastChild.style.color = 'transparent'
        })
      }
    },
    animate() {
      const hotBg = document.querySelector('.hot-bg')
      const dog = document.querySelector('.hot-dog')
      hotBg.addEventListener('mousemove', function() {
        this.style.backgroundSize = '120% 120%'
        this.style.filter = 'contrast(130%)'
      })
      hotBg.addEventListener('mouseout', function() {
        this.style.backgroundSize = '100% 100%'
        this.style.filter = 'contrast(100%)'
      })
      dog.addEventListener('mousemove', function() {
        this.firstChild.style.transformOrigin = '100% 50%'
        this.firstChild.style.transform = 'rotate(-90deg)'
      })
      dog.addEventListener('mouseout', function() {
        this.firstChild.style.transformOrigin = '100% 50%'
        this.firstChild.style.transform = 'rotate(0deg)'
      })
    }
  },
  filters: {
    numberFormat(val, type = '') {
      val = val.toString().split('').reverse()
      for(let i = 0; i < val.length; i++) {
        if(i !== 0 && i % 3 === 0) {
          val[i] = val[i] + ','
        }
      }
      return type + val.reverse().join('')
    }
  }
}
</script>

<style lang="less" scoped>
  .ad{
    width: 100%;
    height: 40px;
    background-color: rgb(250,250,250);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ad-left {
      display: flex;
      align-items: center;
      color: green;
      .ad-btn{
        margin: 0 5px;
      }
      .ad-a{
        font-size: 12px;
      }
      .ad-a:visited{
        color: rgb(50,50,200);
      }
    }
    .ad-right{
      margin-right: 10px;
      font-size: 12px;
      color: #aaa;
      a:visited {
        color: #aaa;
      }
    }
  }
  .el-card {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .card-panel-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .card {
      height: 100px;
      flex: 1;
      margin: 0 10px;
      background: linear-gradient(#1dcc1d 45%, #55ffff);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .card-icon {
      margin-left: 15px;
      height: 70px;
      width: 70px;
      border-radius: 10px;
      font-size: 50px;
      color: deepskyblue ;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .card-content {
      margin-right: 15px;
    }
    .card-title{
      font-size: 18px;
      color: #ffff7f;
    }
    .card-data{
      font-size: 20px;
      color: #4e2a6b;
      font-weight: 600;
    }
    .card:hover .card-icon{
      background-color: deepskyblue;
      color: #fff;
    }
  }
  .echarts-content {
    height: 260px;
  }
  .echarts-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-card{
      flex: 1;
      margin: 10px;
    }
    .ecsItem {
      height: 300px;
    }
  }
  .index-footer {
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
    .el-card {
      margin: 0 5px;
    }
    .card-order {
      flex: 6;
      .index-footer-text {
        min-width: 450px;
      }
    }
    .card-todo {
      flex: 3;
      padding: 0!important;
    }
    .card-hot {
      flex: 3;
    }
    /deep/ .el-card__body {
      padding: 0;
    }
  }
  .el-tag{
    width: 60px;
    padding: 0;
    text-align: center;
  }
  .todo{
    position: relative;
    width: 100%;
    .todoHeader {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
    }
    /deep/ .todoInput {
      height: 40px;
      padding-left: 15px;
      color: #aa55ff;
      flex: 10;
      border: none;
      outline: none;
    }
    .todoAddIcon {
      margin-left: 15px;
      flex: 2;
      line-height: 40px;
      font-size: 20px;
      color: #79ff6a;
      cursor: pointer;
    }
    .todoAddIcon:hover {
      color: #79ee6a;
    }
    .todoul {
      padding: 0;
      max-height: 270px;
      overflow-y: scroll;
    }
    .todoli {
      padding: 0;
      height: 30px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
    }
    .c-done {
      margin: 0 5px;
      font-size: 20px;
      flex: 1;
      cursor: pointer;
    }
    .done {
      color: #55aaff;
    }
    .undone {
      color: #eee;
    }
    .nodone {
      flex: 10;
    }
    .isdone {
      flex: 10;
      text-decoration: line-through;
      color: #ccc;
    }
    .removetodo {
      flex: 1;
      margin: 0 5px;
      color: transparent;
      cursor: pointer;
    }
    .todotitle {
      font-family: "mv boli";
      text-align: center;
      // font-style: italic;
      color: #c8c0ff;
      user-select: none;
    }
  }
  .hot {
      width: 100%;
  }
  .hot-bg{
    height: 200px;
    background: url(../../assets/indexhot.png) no-repeat center center;
    background-size: 100% 100%;
    transition: all .2s;
  }
  .hot-footer {
    position: relative;
    height: 200px;
    border-top: 1px solid transparent;
  }
  .hot-dog {
    position: absolute;
    top: -40px;
    margin-left: 20px;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s;
  }
  .dog{
    height: 85%;
    width: 85%;
    border-radius: 50%;
    background: url("https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif") no-repeat center center;
    background-size: 100% 100%;
    transition: all .2s;
  }
  .hot-item {
    margin-top: 40px;
    width: 100%;
    height: 200px;
  }
</style>
